/* Guide d'installation (tutoriel.html) : même système visuel que l'accueil.
Page toujours en hébreu RTL : propriétés physiques assumées (droite = début).
Pensé aussi pour de vieux Chrome (appareil réel du parent) : valeurs de repli
avant clamp(), marges plutôt que gap sur les boîtes flex, pas de inset/aspect-ratio. */
:root{
--papier:#f4ecdc;
--papier-photo:#fdf3e3;
--papier-2:#ebe1ca;
--encre:#1b1511;
--encre-2:#51443a;
--coupe:#b3123f;
--bordeaux:#7a0a35;
--bordeaux-2:#5e0828;
--nuit:#15130f;
--creme-t:#efe5cf;
--ligne:rgba(27,21,17,.22);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:#e2d7c0;overflow:auto;scrollbar-color:#8a7a68 var(--papier)}
body{margin:0;background:var(--papier);color:var(--encre);font-family:"Rubik",system-ui,sans-serif;font-weight:400;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{font-family:"Fredoka","Rubik",system-ui,sans-serif;font-weight:500;margin:0;line-height:1.08;text-wrap:balance}
::selection{background:var(--bordeaux);color:#fff}
:focus-visible{outline:2px solid var(--coupe);outline-offset:4px;border-radius:6px}
.large{width:100%;max-width:1040px;margin:0 auto;padding:0 22px}
@media (min-width:640px){.large{padding:0 40px}}
@media (min-width:1000px){.large{padding:0 56px}}
.lisible{max-width:760px;margin:0}
.mur{position:relative;isolation:isolate}
.mur::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
/* barre */
.barre{position:-webkit-sticky;position:sticky;top:0;margin-bottom:-68px;z-index:30;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 20px;background:rgba(253,243,227,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(27,21,17,.08)}
@media (min-width:640px){.barre{padding:0 40px}}
@media (min-width:1000px){.barre{padding:0 56px}}
.logo{display:flex;align-items:center;font-family:"Fredoka";font-weight:500;font-size:22px}
.logo img{height:30px;margin-left:10px}
.acces{font-family:"Fredoka";font-weight:500;font-size:15.5px;padding:8px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(27,21,17,.7);transition:background .25s,color .25s}
.acces:hover{background:var(--encre);color:var(--papier)}
/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:999px;font-family:"Fredoka";font-weight:500;font-size:18px;line-height:1.3;padding:13px 28px;background:var(--bordeaux);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 20px -12px rgba(94,8,40,.8);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.btn:hover{transform:translateY(-1px);background:var(--bordeaux-2)}
.btn-calme{display:inline-flex;align-items:center;justify-content:center;font-family:"Fredoka";font-weight:500;font-size:17px;line-height:1.3;padding:10px 24px;min-height:44px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(27,21,17,.7);transition:background .25s,color .25s}
.btn-calme:hover{background:var(--encre);color:var(--papier)}
/* tête */
.tete{background:var(--papier-photo);padding:120px 0 56px}
h1{font-size:44px;font-size:clamp(44px,7vw,88px);letter-spacing:-.012em}
.petit{margin-top:20px;font-size:18px;font-size:clamp(18px,1.7vw,22px);font-weight:300;color:var(--encre-2);max-width:36ch}
.besoins{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr)}
.besoin{display:flex;align-items:center;padding:16px 0 16px 16px;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.besoin+.besoin{padding-right:20px;border-right:1px solid var(--ligne)}
.besoin svg{width:26px;height:26px;flex:none;margin-left:14px;fill:none;stroke:var(--encre);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
/* assistant du téléphone (le script le démasque seulement sur Android) */
.assistant-telephone{margin-top:40px;background:var(--papier-2);border:1px solid var(--ligne);border-radius:16px;padding:28px}
.assistant__surtitre{display:block;font-size:15px;color:var(--encre-2)}
.assistant__titre{margin-top:6px;font-size:30px;font-size:clamp(26px,3vw,36px)}
.assistant__modele{margin-top:10px;font-weight:300;color:var(--encre-2)}
.assistant__modele b{font-weight:500;color:var(--encre)}
.assistant__actions{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center}
.assistant__actions>*{margin:0 0 12px 14px}
.assistant__retour{margin-top:6px;min-height:1.6em;font-size:16px;color:var(--encre)}
.assistant__retour a{border-bottom:1px solid var(--encre);font-weight:500}
.assistant__precision{margin-top:14px;font-size:15.5px;font-weight:300;color:var(--encre-2);max-width:60ch}
.assistant__choix{margin-top:18px;display:flex;flex-wrap:wrap}
.assistant__choix a,.rangee-marques a{display:inline-flex;align-items:center;min-height:44px;margin:0 0 9px 10px;font-family:"Fredoka";font-weight:400;font-size:16px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(27,21,17,.4);transition:background .25s,color .25s}
.assistant__choix a:hover{background:var(--encre);color:var(--papier)}
/* les quatre étapes */
.etapes-bloc{padding:72px 0 24px}
.etapes{margin:0}
.etape{display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-columns:clamp(60px,11vw,150px) minmax(0,1fr);grid-column-gap:20px;padding:30px 0 40px;border-top:1px solid var(--ligne)}
.etape:last-child{border-bottom:1px solid var(--ligne)}
.etape__num{grid-column:1;grid-row:1 / span 2;font-family:"Fredoka";font-weight:400;font-size:56px;font-size:clamp(54px,8vw,108px);color:var(--coupe);line-height:.9}
.etape__titre{grid-column:2;grid-row:1;font-size:28px;font-size:clamp(26px,3.4vw,42px)}
.etape__cols{grid-column:2;grid-row:2;margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) 18rem;grid-column-gap:40px;align-items:start}
.etape__cols>div>*+*{margin-top:18px}
.etape__texte{max-width:60ch;color:var(--encre-2);font-weight:300}
.etape__texte strong{font-weight:500;color:var(--encre)}
.chemin,.famille__chemin{display:flex;flex-wrap:wrap;align-items:center}
.chemin>*,.famille__chemin>*{margin:0 0 8px 8px}
.chemin span,.famille__chemin span{font-family:"Fredoka";font-weight:400;font-size:16px;padding:5px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(27,21,17,.4)}
.chemin span:last-child,.famille__chemin span.k{background:var(--encre);color:var(--papier);box-shadow:none}
.chemin i,.famille__chemin i{font-style:normal;color:var(--encre-2);font-size:15px}
.renvois{border-top:1px solid var(--ligne)}
.renvoi{display:flex;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--ligne);font-size:16.5px;color:var(--encre-2)}
.renvoi__cle{flex:none;min-width:5.5em;margin-left:18px;font-family:"Fredoka";font-weight:500;color:var(--encre)}
.renvoi a,.famille__astuce a,.hors-site a,.question a,.fin-prep a.lien{border-bottom:1px solid var(--encre)}
/* avis : un point, un titre, un texte */
.avis{display:flex;align-items:baseline;max-width:64ch;border:1px solid var(--ligne);border-radius:14px;padding:16px 20px;background:var(--papier-photo)}
.avis>i{width:8px;height:8px;border-radius:50%;flex:none;margin-left:14px;transform:translateY(-2px);background:var(--encre)}
.avis--rouge>i{background:var(--coupe)}
.avis__titre{display:block;font-family:"Fredoka";font-weight:500;font-size:19px}
.avis p+p,.avis__titre+p{margin-top:2px;font-size:16.5px;color:var(--encre-2);font-weight:300}
.avis strong{font-weight:500;color:var(--encre)}
/* écran dessiné : un dessin sobre, pas une capture, pas l'appareil de l'enfant */
.ecran{width:100%;max-width:18rem;margin:0 auto;padding:8px 8px 6px;border:1px solid var(--ligne);border-radius:16px;background:var(--papier-photo)}
.ecran::after{content:"ציור להמחשה";display:block;margin-top:8px;padding-top:6px;border-top:1px solid var(--ligne);text-align:center;font-size:12.5px;color:var(--encre-2)}
.ecran__entete{display:flex;align-items:center;padding:6px 10px 10px;font-size:13px;color:var(--encre-2)}
.ecran__entete svg{width:15px;height:15px;flex:0 0 15px;margin-left:8px;fill:none;stroke:var(--encre-2);stroke-width:2}
.ecran__ligne,.ecran__rangee{display:flex;padding:8px 10px;border-radius:8px}
.ecran__ligne{flex-direction:column}
.ecran__rangee{align-items:center;justify-content:space-between}
.ecran__rangee .txt{flex:1;min-width:0;margin-left:14px}
.ecran__t{font-size:14.5px;color:var(--encre)}
.ecran__d{font-size:12.5px;color:var(--encre-2)}
.ecran__ligne--visee{background:rgba(27,21,17,.06);box-shadow:inset 0 0 0 1px var(--encre)}
.ecran__ligne--visee .ecran__t{font-weight:500}
.ecran__ligne--piege{background:rgba(179,18,63,.07);box-shadow:inset 0 0 0 1px var(--coupe)}
.ecran__ligne--piege .ecran__t{font-weight:500;color:#8c0e32}
.ecran__geste{display:flex;align-items:center;justify-content:center;margin-top:10px;font-size:13px;color:var(--encre)}
.ecran__geste svg{width:14px;height:14px;flex:0 0 14px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:2}
.ecran__geste--piege{color:#8c0e32}
.interrupteur{display:block;width:38px;height:22px;flex:0 0 38px;position:relative;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(27,21,17,.5)}
.interrupteur::after{content:"";position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:rgba(27,21,17,.5)}
.interrupteur--actif{background:var(--encre);box-shadow:none}
.interrupteur--actif::after{right:auto;left:4px;background:var(--papier)}
.fenetre{padding:14px;border:1px solid var(--ligne);border-radius:12px;background:#fff}
.fenetre__titre{font-size:14.5px;font-weight:500}
.fenetre__texte{margin-top:4px;font-size:12.5px;color:var(--encre-2)}
.fenetre__case{display:flex;align-items:center;margin-top:12px;font-size:12.5px;color:var(--encre-2)}
.fenetre__coche{display:grid;place-items:center;width:16px;height:16px;flex:0 0 16px;margin-left:8px;border-radius:4px;background:var(--encre)}
.fenetre__coche svg{width:11px;height:11px;fill:none;stroke:var(--papier);stroke-width:3}
.fenetre__actions{display:flex;margin-top:14px}
.fenetre__actions span{margin-left:8px;padding:4px 12px;border-radius:8px;font-size:12.5px}
.fenetre__non{color:var(--encre-2)}
.fenetre__oui{font-weight:500;box-shadow:inset 0 0 0 1px var(--encre)}
/* fin des étapes : mur bordeaux */
.fin-prep{margin-top:56px;background:radial-gradient(70% 90% at 14% 8%,#951049 0,transparent 60%),var(--bordeaux);color:#fbeef2;padding:44px 0}
@media (min-width:760px){.fin-prep{padding:68px 0}}
.fin-prep .large{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.fin-prep .large>*{margin:0 0 20px 40px}
.fin-prep__titre{font-family:"Fredoka";font-weight:500;line-height:1.08;font-size:36px;font-size:clamp(36px,5vw,60px)}
.fin-prep__texte{margin-top:12px;color:rgba(251,238,242,.86);font-weight:300;max-width:46ch}
.fin-prep .btn{background:#fbeef2;color:var(--bordeaux);box-shadow:0 10px 20px -12px rgba(0,0,0,.6)}
.fin-prep .btn:hover{background:#fff}
/* familles (le script ajoute familles--filtrees, famille--visible, famille--detectee) */
.fam{padding:72px 0}
.fam h2,.qs h2{font-size:32px;font-size:clamp(32px,4.2vw,52px)}
.familles{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column-gap:40px}
.famille{border-top:1px solid var(--ligne);scroll-margin-top:84px}
.famille:nth-last-child(-n+2){border-bottom:1px solid var(--ligne)}
.famille:target{background:rgba(179,18,63,.06)}
.famille--detectee{box-shadow:inset -3px 0 0 var(--coupe)}
.famille>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:18px 4px;cursor:pointer;list-style:none}
.famille>summary::-webkit-details-marker{display:none}
.famille>summary::after{content:"+";flex:none;margin-right:16px;font-weight:400;font-size:28px;line-height:1}
.famille[open]>summary::after{content:"\2212"}
.famille__entete{min-width:0}
.famille__nom{font-size:22px;font-size:clamp(22px,2.4vw,28px)}
.famille__modeles{margin-top:2px;font-weight:300;font-size:16px;color:var(--encre-2)}
.famille__corps{padding:0 4px 24px}
.famille__ligne{margin-top:18px}
.famille__label{font-family:"Fredoka";font-weight:500;font-size:17px;margin-bottom:8px}
.famille__astuce{margin-top:14px;max-width:62ch;color:var(--encre-2);font-weight:300;font-size:16.5px}
.famille__astuce b{font-weight:500;color:var(--encre)}
.familles--filtrees .famille{display:none}
.familles--filtrees .famille--visible{display:block;border-bottom:1px solid var(--ligne)}
.familles--filtrees{grid-template-columns:minmax(0,1fr)}
.familles__autre{margin-top:16px;font-size:16px}
.hors-site{margin-top:36px;max-width:62ch}
.hors-site a{font-family:"Fredoka";font-weight:500;font-size:18px}
.hors-site__note{margin-top:10px;font-size:15.5px;font-weight:300;color:var(--encre-2)}
/* questions */
.qs{background:var(--papier-2);padding:72px 0}
.qs h2{margin-bottom:28px}
.question{border-top:1px solid var(--ligne)}
.question:last-of-type{border-bottom:1px solid var(--ligne)}
.question summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;padding:20px 0;font-family:"Fredoka";font-weight:500;font-size:20px;font-size:clamp(19px,2.2vw,24px);line-height:1.3}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";flex:none;margin-right:20px;font-weight:400;font-size:28px;line-height:1}
.question[open] summary::after{content:"\2212"}
.question p{padding-bottom:16px;max-width:62ch;color:var(--encre-2);font-weight:300}
.pied{background:var(--nuit);color:rgba(239,229,207,.78);font-size:15px}
.pied .large{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding-top:24px;padding-bottom:24px}
.pied .logo{font-size:19px;color:var(--creme-t)}
.pied nav a{margin-right:22px}
.pied a:hover{color:#fff}
@media (max-width:860px){
.etape__cols{grid-template-columns:minmax(0,1fr);grid-row-gap:26px}
.familles{grid-template-columns:minmax(0,1fr)}
.famille:nth-last-child(2){border-bottom:0}
}
@media (max-width:760px){
.besoins{grid-template-columns:minmax(0,1fr)}
.besoin+.besoin{padding-right:0;border-right:0;border-top:0}
.etape{grid-template-columns:minmax(0,1fr);grid-column-gap:0}
.etape__num,.etape__titre,.etape__cols{grid-column:1}
.etape__num{grid-row:auto;font-size:56px}
.etape__titre{grid-row:auto;margin-top:4px}
.etape__cols{grid-row:auto}
.tete{padding-top:104px}
.assistant-telephone{padding:22px}
.assistant__actions{display:block}
.assistant__actions>*{display:flex;margin-left:0}
}
@media (prefers-reduced-motion:reduce){.btn,.acces,.btn-calme,.assistant__choix a{transition:none}html{scroll-behavior:auto}}
/* Feuille : au-delà de 1260 px la page se pose, centrée, sur un fond plus sombre. */
@media (min-width:1260px){
body{max-width:1180px;margin:28px auto;border-radius:26px;overflow:clip;box-shadow:0 0 0 1px rgba(27,21,17,.07),0 50px 90px -60px rgba(27,21,17,.45)}
}
/* ---------------------------------------------------------------------------
Sélecteur de langue : la capsule à deux pastilles de l'accueil (index.html), même dessin.
Écrit ici sans `gap` ni propriétés logiques (cf. l'en-tête de cette feuille : vieux Chrome).
--------------------------------------------------------------------------- */
.langues{display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(27,21,17,.13),0 8px 18px -12px rgba(27,21,17,.4);margin-right:auto;margin-left:14px}
.langues a{display:flex;align-items:center;padding:5px 14px;border-radius:999px;font-family:"Fredoka","Rubik",system-ui,sans-serif;font-weight:500;font-size:14.5px;line-height:1.3;color:var(--encre-2);transition:background .25s,color .25s}
.langues a+a{margin-right:3px}
.langues a:hover{background:rgba(122,10,53,.09);color:var(--bordeaux)}
.langues a[aria-current]{background:var(--bordeaux);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.langues .dr{font-family:"Noto Color Emoji",sans-serif;font-size:17px;line-height:1}
.langues .nom{margin-right:7px}
@media (max-width:620px){.langues{margin-left:10px}.langues a{padding:5px 9px}.langues .nom{display:none}}
@media (prefers-reduced-motion:reduce){.langues a{transition:none}}
/* ---------------------------------------------------------------------------
Version anglaise (/en/tutoriel.html) : la page se lit de gauche à droite.
⛔ Aucune règle du dessus n'est modifiée : tout ce qui suit ne s'applique que sous
`html[dir="ltr"]`, et retourne une à une les propriétés physiques pensées pour l'hébreu.
--------------------------------------------------------------------------- */
html[dir="ltr"] .langues{margin-right:14px;margin-left:auto}
html[dir="ltr"] .langues a+a{margin-right:0;margin-left:3px}
html[dir="ltr"] .langues .nom{margin-right:0;margin-left:7px}
html[dir="ltr"] .logo img{margin-left:0;margin-right:10px}
html[dir="ltr"] .besoin{padding:16px 16px 16px 0}
html[dir="ltr"] .besoin+.besoin{padding-right:16px;border-right:0;padding-left:20px;border-left:1px solid var(--ligne)}
html[dir="ltr"] .besoin svg{margin-left:0;margin-right:14px}
html[dir="ltr"] .assistant__actions>*{margin:0 14px 12px 0}
html[dir="ltr"] .assistant__choix a,html[dir="ltr"] .rangee-marques a{margin:0 10px 9px 0}
html[dir="ltr"] .chemin>*,html[dir="ltr"] .famille__chemin>*{margin:0 8px 8px 0}
html[dir="ltr"] .renvoi__cle{margin-left:0;margin-right:18px}
html[dir="ltr"] .avis>i{margin-left:0;margin-right:14px}
/* le dessin d'écran : la légende sous le cadre, et les éléments d'Android dans leur sens anglais */
html[dir="ltr"] .ecran::after{content:"Illustration"}
html[dir="ltr"] .ecran__entete svg{margin-left:0;margin-right:8px}
html[dir="ltr"] .ecran__rangee .txt{margin-left:0;margin-right:14px}
html[dir="ltr"] .ecran__geste svg{margin-left:0;margin-right:8px}
html[dir="ltr"] .interrupteur::after{right:auto;left:4px}
html[dir="ltr"] .interrupteur--actif::after{left:auto;right:4px}
html[dir="ltr"] .fenetre__coche{margin-left:0;margin-right:8px}
html[dir="ltr"] .fenetre__actions{justify-content:flex-end}
html[dir="ltr"] .fin-prep{background:radial-gradient(70% 90% at 86% 8%,#951049 0,transparent 60%),var(--bordeaux)}
html[dir="ltr"] .fin-prep .large>*{margin:0 40px 20px 0}
html[dir="ltr"] .famille--detectee{box-shadow:inset 3px 0 0 var(--coupe)}
html[dir="ltr"] .famille>summary::after{margin-right:0;margin-left:16px}
html[dir="ltr"] .question summary::after{margin-right:0;margin-left:20px}
html[dir="ltr"] .pied nav a{margin-right:0;margin-left:22px}
@media (max-width:760px){
html[dir="ltr"] .besoin+.besoin{padding-left:0;border-left:0}
html[dir="ltr"] .assistant__actions>*{margin-right:0}
}
/* Petits téléphones : avec le sélecteur de langue, la barre porte trois éléments au lieu de deux.
Mesuré à 320 px : sans ce resserrement le bouton de connexion sortait de l'écran (34 px en
hébreu, 54 px en anglais). Placé en fin de feuille pour l'emporter sur les règles LTR du dessus. */
@media (max-width:420px){
.barre{padding:0 12px}
.barre .logo{font-size:19px;white-space:nowrap}
.barre .logo img{height:26px;width:auto;margin-left:7px}
html[dir="ltr"] .barre .logo img{margin-left:0;margin-right:7px}
.barre .langues{margin-left:8px}
html[dir="ltr"] .barre .langues{margin-left:auto;margin-right:8px}
.barre .langues a{padding:5px 6px}
.barre .acces{font-size:13.5px;padding:7px 12px;white-space:nowrap}
}
@media (max-width:380px){
/* en anglais le bouton « Sign in with Google » est plus long : l'emblème reste, le nom s'efface */
html[dir="ltr"] .barre .logo{font-size:0}
html[dir="ltr"] .barre .logo img{margin-right:0}
}
@media (max-width:340px){
.barre{padding:0 8px}
.barre .langues a{padding:5px}
.barre .acces{font-size:13px;padding:7px 9px}
}