/* ============ ESSAIS DE DESIGN · 6e série (24 octobre 2026) : section 04, Notre technologie ============ */
/* 20 h 43 : comme les éclatés des sections 01 et 03, sans cadre ni lecteur. La scène prend toute la place que l'écran laisse ;
   à côté, un court texte. */

#technologie.oc-ecran{padding-top:.75rem;padding-bottom:.75rem}
#technologie .oc-tete-sec{margin-bottom:.5rem}
#technologie .oc-tete-sec h2{margin:0}
.tc-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,21rem);gap:clamp(1.5rem,3vw,3.5rem);align-items:center}
.tc-scene{position:relative;margin:0;height:34rem;min-width:0;overflow:hidden}
.tc-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;shape-rendering:geometricPrecision}
.tc-svg .tc-imp{vector-effect:non-scaling-stroke;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.1 7;animation:tc-flux 1.2s linear infinite}
.tc-svg .tc-arc{vector-effect:non-scaling-stroke;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.1 6.5;animation:tc-flux 1.6s linear infinite}
@keyframes tc-flux{to{stroke-dashoffset:-14.2}}

/* le court texte */
.tc-texte{align-self:center}
.tc-intro{margin:0 0 1.125rem;font:400 1.375rem/1.3 var(--serif);color:var(--oc-encre)}
.tc-sol{margin:0;border-top:1.5px solid var(--oc-encre)}
.tc-sol > div{padding:.75rem 0 .8125rem;border-bottom:1px solid var(--oc-filet)}
.tc-sol dt{font:500 .8125rem/1.2 var(--pixel);color:var(--bleu);margin:0 0 .3125rem}
.tc-sol dd{margin:0;font-size:1rem;line-height:1.42;color:var(--oc-encre)}

/* sur un écran d'ordinateur, la section occupe exactement l'écran et la scène prend tout ce qui reste */
@media (min-width:1000px) and (min-height:600px){
  #technologie > .wrap{display:flex;flex-direction:column;height:calc(100svh - var(--oc-tete) - 1.5rem)}
  #technologie .tc-grille{flex:1;min-height:0}
  #technologie .tc-scene{height:100%}
}
@media (prefers-reduced-motion: reduce){.tc-svg .tc-imp,.tc-svg .tc-arc{animation:none}}
html.gris #technologie .tc-scene{filter:grayscale(1)}
@media (max-width:999px){
  .tc-grille{grid-template-columns:1fr}
  .tc-scene{height:min(70svh,30rem)}
}

/* le lien « Notre technologie » ajouté à l'en-tête : les liens restent sur une ligne */
.oc-nav{gap:clamp(1rem,1.7vw,1.75rem)}
.oc-nav a{white-space:nowrap}

/* ---- 19 h 45 (Paul) : chaque figure, la plus grande que l'écran permet ----
   Figure 1 (haut de page) : sa colonne prend la largeur que permet la hauteur de l'écran
   (la figure fait 0,81 de sa largeur en hauteur, plus sa légende), sans dépasser 64 % de la grille. */
@media (min-width:1000px) and (min-height:600px){
  #fonctionnement.oc-ecran,#constat.oc-ecran{padding-top:.75rem;padding-bottom:.75rem}   /* 02 dépassait l'écran de 31 px */
  #fonctionnement .oc-tete-sec{margin-bottom:clamp(.5rem,1.6vh,1.25rem)}
  .oc-hero__grille{grid-template-columns:minmax(0,1fr) min(64%,calc((100svh - var(--oc-tete) - 9.5rem) / .8125))}
}