/* page Soutenir : taxe d'apprentissage */

/* ---------- appel de la taxe d'apprentissage ----------
   Même traitement que la bande des neuf modules : fond rouge DJCE, texte blanc. */
.sec.taxe{background:#8E0212;color:#fff;padding:96px 0 104px;
  position:relative;isolation:isolate}

/* ---------- la matière du rouge ----------
   L'aplat était nu : une bande de mille pixels de haut d'un seul rouge, avec le
   texte serré dans sa moitié gauche. Deux couches le meublent, toutes deux en
   blanc et toutes deux presque invisibles une à une.

   Un semis de croix d'abord — le même motif que la page des promotions et des
   débouchés, tracé en blanc — éclos du coin haut droit, au-dessus de
   l'aide-mémoire, et dissipé en descendant vers le texte. Le bas de la bande
   est occupé par la lettre, qui est opaque : un semis qui naîtrait d'en bas
   passerait tout entier derrière elle. Une lueur ensuite, au même endroit :
   elle éclaircit le rouge de sept pour cent, ce qui suffit à détacher l'encart
   du fond sans qu'on voie d'où vient la lumière. */
.sec.taxe::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 17.5v9M17.5 22h9' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(62% 34% at 100% 0%,#000 5%,transparent 76%);
  mask-image:radial-gradient(62% 34% at 100% 0%,#000 5%,transparent 76%)}
.sec.taxe::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 54% at 80% 20%,rgba(255,255,255,.07) 0,rgba(255,255,255,0) 70%)}
/* Le titre tient sur une seule ligne : la taille s'ajuste à la largeur plutôt
   que de laisser le texte se replier. En dessous de 900 px, il se replie. */
.sec.taxe h2{color:#fff;margin:0 0 34px;font-size:clamp(22px,2.72vw,38px);font-weight:300;line-height:1.2;
  white-space:nowrap}
@media (max-width:900px){.sec.taxe h2{white-space:normal;font-size:clamp(24px,5.6vw,32px)}}

/* ---------- le panneau de tête ----------
   Ce qu'on demande à gauche, ce qu'il faut savoir pour le faire à droite. La
   colonne de droite est plus étroite : elle ne porte que trois lignes, et lui
   donner la moitié de la page l'aurait mise au même rang que l'appel.

   Les deux sont posés sur du papier et non sur le rouge. Un texte blanc sur un
   aplat saturé se lit toujours moins bien que de l'encre sur du blanc : les
   contreformes des lettres se remplissent de couleur et l'œil fatigue au bout
   de quelques lignes. Le rouge ne disparaît pas pour autant — il encadre le
   panneau, porte le titre au-dessus et les deux boutons en dessous, qui sont
   justement ce qui gagne à être sur un aplat. */
.taxe-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:30px 56px;
  align-items:start;background:#fff;color:var(--ink);
  padding:44px clamp(26px,3.2vw,48px) 46px;
  box-shadow:0 24px 54px -20px rgba(0,0,0,.4)}
@media (max-width:980px){.taxe-tete{grid-template-columns:1fr;gap:34px}}
@media (max-width:680px){.taxe-tete{padding:32px 24px 34px}}

/* ---------- l'appel ----------
   Deux phrases, au corps d'un chapeau : ce qu'on demande et ce que ça change.
   Elles passent devant la lettre des co-directeurs parce qu'elles tiennent en
   dix secondes de lecture, là où la lettre en demande deux minutes. */
.taxe-appel{max-width:62ch}
.taxe-appel p{margin:0 0 20px;font-family:Spectral,Georgia,serif;font-size:clamp(18px,1.6vw,21px);
  line-height:1.62;color:var(--ink);text-align:justify;hyphens:auto}
.taxe-appel p:last-child{margin-bottom:0;font-size:clamp(16px,1.3vw,17.5px);
  color:var(--muted);font-family:Archivo,sans-serif;line-height:1.72}
/* Ce que la taxe sert à faire, et les deux formes qu'elle peut prendre. Le gras
   seul : ces deux phrases sont courtes, et un soulignement de plus les
   hacherait. Il est à l'encre dans les deux paragraphes, y compris le second
   qui est en gris — c'est ce qui le détache. */
.taxe-appel p b{font-weight:600;color:var(--ink)}
@media (max-width:680px){
  /* Colonne trop courte pour la justification : les blancs entre les mots y
     reparaîtraient. */
  .taxe-appel p{text-align:left;hyphens:manual}
}

/* ---------- les deux gestes ----------
   Le bordereau se télécharge, Soltéa s'ouvre. Deux formes différentes parce que
   ce sont deux natures : un bouton plein pour le fichier qu'on emporte, un lien
   souligné pour le site où l'on va. */
.taxe-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:38px 0 0}
.btn-clair{background:#fff;color:#8E0212;border-color:#fff;
  transition:background .24s ease,color .24s ease}
.btn-clair:hover,.btn-clair:focus-visible{background:rgba(255,255,255,.86);color:#6E0110}
.taxe-soltea{font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;
  transition:border-color .22s ease}
.taxe-soltea::after{content:" \2197"}
.taxe-soltea:hover,.taxe-soltea:focus-visible{border-bottom-color:#fff}

/* ---------- l'aide-mémoire ----------
   Les trois renseignements qu'il faut avoir sous les yeux au moment d'affecter
   la taxe : jusqu'à quand, quel établissement, quelle formation. Ils étaient
   dans la lettre, au milieu d'un paragraphe de dix lignes — c'est-à-dire
   introuvables au moment où l'on en a besoin, qui est le moment où l'on clique
   sur le bouton d'à côté.

   Il est dans le panneau, sur le gris de la page : c'est un pense-bête, pas un
   second appel, et il se distingue du texte qu'il accompagne par sa matière
   plutôt que par sa couleur. */
.taxe-reperes{background:var(--gris-page);box-shadow:var(--filet-bloc);
  padding:26px 28px 10px}
.taxe-reperes-titre{margin:0 0 18px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--crimson)}
.taxe-reperes dl{margin:0}
.taxe-reperes dl>div{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.taxe-reperes dl>div:last-child{border-bottom:0}
.taxe-reperes dt{margin:0 0 5px;font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.taxe-reperes dd{margin:0;font-size:15.4px;line-height:1.55;color:var(--ink)}

/* ---------- la section de la lettre ----------
   La page entière était rouge : l'appel et la lettre tenaient dans le même
   aplat, du haut de la bande jusqu'au pied. L'appel y reste — c'est un appel,
   et un aplat lui va. La lettre en sort : c'est une lecture de deux minutes, et
   deux minutes de lecture sur une couleur pleine fatiguent.

   Elle revient donc sur le papier du site : le gris de la section porte le blanc
   de la lettre comme les panneaux des autres pages.

   La coupure entre le rouge et le gris est franche. Un fondu y avait été
   essayé : du rouge au clair, il passe par le rose, et le rose n'est pas une
   couleur de la maison. C'est pour la même raison que les fondus de la page de
   l'école ont été retirés. */
.sec.taxe-mot{background:var(--gris-page);padding:92px 0 104px}
@media (max-width:680px){.sec.taxe-mot{padding:62px 0 72px}}

/* ---------- la lettre des co-directeurs ----------
   Elle était noyée dans la bande rouge : quatre paragraphes justifiés, de la
   même couleur et du même corps que tout le reste, et sa signature tout en bas.
   On la lisait rarement, et on ne la voyait pas.

   Elle est maintenant posée sur un papier blanc détaché du gris par son ombre
   — le même jeu que les panneaux des autres pages. La forme dit ce que c'est :
   une lettre, posée sur le bureau.

   Elle est justifiée et elle a grandi : le papier prend maintenant la plus
   grande part de la largeur, le corps monte d'un point et demi, et les
   passages qui portent la demande sont en gras. Une colonne plus large
   supporte la justification — c'est dans une colonne étroite qu'elle creuse
   des blancs entre les mots —, et la césure automatique achève de les
   résorber. */
.taxe-lettre{margin:0;padding:52px clamp(32px,4.6vw,66px) 56px;background:#fff;color:var(--ink);
  max-width:none;box-shadow:var(--filet-bloc),var(--ombre-bloc)}
.taxe-lettre-rang{margin:0 0 26px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--crimson)}
.taxe-lettre p{margin:0 0 22px;font-size:17.6px;line-height:1.82;color:var(--muted);
  text-align:justify;hyphens:auto}
/* Les passages qui portent la demande. Le gras seul, sans soulignement : dans
   un paragraphe de dix lignes, deux traits de plus le hacheraient. */
.taxe-lettre p b{font-weight:600;color:var(--ink)}

/* Le dévoilement : chaque paragraphe paraît à son tour, quand on arrive
   dessus. Le mouvement est plus long que celui des blocs — une demi-seconde
   pour une case, mais un paragraphe qu'on va lire a le temps de monter. */
.taxe-lettre .devoile{opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
.taxe-lettre .devoile.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .taxe-lettre .devoile{opacity:1;transform:none;transition:none}
}
.taxe-lettre a{color:var(--crimson);border-bottom:1px solid rgba(194,3,25,.4);padding-bottom:1px;
  transition:border-color .22s ease}
.taxe-lettre a:hover{border-bottom-color:var(--crimson)}
.taxe-signature{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-family:Spectral,Georgia,serif;font-size:18px;line-height:1.7;color:var(--muted);text-align:left}
.taxe-signature b{font-weight:400;color:var(--ink)}

@media (max-width:680px){
  .sec.taxe{padding:68px 0 76px}
  .taxe-reperes{padding:22px 22px 8px}
  /* Sur une colonne étroite, le semis passe sur le texte : on le resserre dans
     son coin, où il n'a plus que du rouge à meubler. */
  .sec.taxe::before{-webkit-mask-image:radial-gradient(48% 15% at 100% 0%,#000 5%,transparent 78%);
    mask-image:radial-gradient(48% 15% at 100% 0%,#000 5%,transparent 78%)}
  .taxe-lettre{padding:32px 26px 34px}
  /* Sur un écran étroit, la colonne redevient trop courte pour la
     justification : les blancs entre les mots y reparaîtraient. */
  .taxe-lettre p{font-size:16.4px;text-align:left;hyphens:manual}
  .taxe-actions .btn{width:100%;text-align:center}
}